<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul, li {
        list-style: none;
    }

    p {
        margin: 0;
    }

    .top-nav-item p {
        display: inline-block;
        position: relative;
    }

    .top-nav-item span {
        padding: 1px 5px;
        color: #fff;
        background-color: red;
        position: absolute;
        top: 5px;
        right: -20px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        border-radius: 3px;
    }

    .tiezi-list-box {
        width: 100%;
        margin-top: 30px;
        display: flex;
        flex-direction: row;
    }

    .tiezi-list li {
        width: 348px;
        margin-bottom: 30px;
        border: 1px solid #eee;
        background-color: #fff;
        float: left;
        margin-right: 30px;
        min-height: 520px;
    }

    .list-top-title {
        width: 100%;
        height: 45px;
        border-bottom: 1px solid #eee;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .list-top-title input {
        flex: 1;
        height: 20px;
        border: 1px solid #eee;
        cursor: pointer;
    }

    .list-top-title p {
        flex: 8;
        text-align: center;
        line-height: 45px;
    }

    .list-content {
        width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }

    .list-content-top {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .list-content-top .logo-user {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .list-content-top .topic-name {
        white-space: nowrap;
    }

    .list-content-top .list-content-top-center {
        box-sizing: border-box;
        padding: 0 10px;
        height: 40px;
        width: 230px;
    }

    .list-content-top .list-content-top-center p {
        width: 100%;
        height: 25px;
        font-size: 14px;
        color: #333;
        line-height: 25px;
    }

    .list-content-top .list-content-top-center span {
        width: 100%;
        height: 15px;
        font-size: 12px;
        color: #999;
        line-height: 15px;
    }

    .list-content-top .stauts-text-error {
        color: red;
        flex: 1;
        white-space: nowrap;
    }

    .list-content-top .stauts-text-success {
        color: #1893ff;
        white-space: nowrap;
    }

    .list-content-center {
        width: 100%;
        display: flex;
        flex-direction: row;
        min-height: 311px;
    }

    .list-content-center-div {
        box-sizing: border-box;
        padding: 0 10px;
        margin-left: 40px;
        width: 268px;
        margin-top: 15px;
    }

    .list-content-span {
        color: red;
    }

    .list-content-text {
        width: 100%;
        font-size: 14px;
        color: #333;
        line-height: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .list-content-center-img {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
        height: 246px;
    }

    .more img {
        width: 72px;
        height: 72px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .more img:nth-of-type(3n) {
        margin-right: 0px;
    }

    .single img {
        width: 100%;
        height: 144px;
    }

    .list-content-bottom {
        width: calc(100% - 50px);
        margin-left: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .list-content-bottom-left {
        width: 210px;
        margin: 0;
    }

    .list-content-bottom-right {
        width: calc(100% - 185px);
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .list-content-bottom-right input {
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

    .list-content-bottom-right p {
        font-size: 14px;
        color: #333;
        margin: 0;
        margin-left: 5px;
    }

    .shenhe-box {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: auto;
        justify-content: space-between;
        margin-top: 10px;
    }

    .shenhe-box-right a {
        margin-right: 5px
    }

    .layui-btn {
        height: 38px;
        line-height: 38px;
        border: 1px solid transparent;
        padding: 0 18px;
        background-color: #009688;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        font-size: 14px;
        border-radius: 2px;
        cursor: pointer;
    }
</style>
<div class="dcat-box custom-data-table dt-bootstrap4">
    @include('admin::grid.table-toolbar')
    {!! $grid->renderFilter() !!}
    {!! $grid->renderHeader() !!}
    <div class="table-responsive table-wrappe tiezi-list-box">
        <ul class="mailbox-attachments clearfix tiezi-list {{ $grid->formatTableClass() }} p-0" id="{{ $tableId }}">
            @foreach($grid->rows() as $row)
                <li data-id="001">
                    <div class="list-top-title">
                        @if(!$row->column('status'))
                            <span
                                style="margin: 10px">{!! $row->column(Dcat\Admin\Grid\Column::SELECT_COLUMN_NAME) !!}</span>
                        @endif
                        <p>【{{$row->column('mini_type')}}】帖子ID:<span>{!! $row->column('id') !!}</span></p>
                    </div>
                    <div class="list-content">
                        <div class="list-content-top">
                            <img class="logo-user" src="{!! $row->column('member.avatar') !!}">
                            <div class="list-content-top-center">
                                <p>{!! $row->column('member.nickname') !!}</p>
                                <span>UID:{!! $row->column('member.id') !!}</span>
                            </div>
                            <div>
                                @if($row->column('topicTag.name'))
                                    <p class="topic-name">{{ $row->column('topicTag.name') }}</p>
                                @endif

                                @if($row->column('status') == 1)
                                    <p class="stauts-text-success">已通过</p>
                                @elseif($row->column('status') == 2)
                                    <p class="stauts-text-error">未通过</p>
                                @endif
                            </div>
                        </div>

                        <div class="list-content-center">
                            <div class="list-content-center-div">
                                @foreach($row->topicTheme as $item)
                                    <span class="list-content-span">#{{$item['name']}}</span>
                                @endforeach
                                    <p class="list-content-text" title="{!! $row->column('title') !!}">
                                        {!! $row->column('title') !!}
                                    </p>
                                <p class="list-content-text" title="{!! $row->column('content') !!}">
                                    {!! $row->column('content') !!}
                                </p>
                                @if(substr_count($row->column('files'),'<img') > 1)
                                    <div class="list-content-center-img more">
                                        {!! $row->column('files') !!}
                                    </div>
                                @else
                                    <div class="list-content-center-img single">
                                        {!! $row->column('files') !!}
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="list-content-bottom">
                            <p class="list-content-bottom-left">{!! $row->column('created_at') !!}</p>
                            @if($row->column('status') != 2)
                                <div class="list-content-bottom-right">
{{--                                    <input type="checkbox" name="remen" value="1">--}}
                                    {!! $row->column('is_hot') !!}
                                    <p>热门</p>
                                </div>
                            @endif
                        </div>
                        <div class="shenhe-box">
                            <div></div>
                            <div class="shenhe-box-right">
                                {!! $row->column(Dcat\Admin\Grid\Column::ACTION_COLUMN_NAME) !!}
                            </div>
                        </div>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>
    {!! $grid->renderFooter() !!}
    @include('admin::grid.table-pagination')
</div>
